<h1><?php echo __d('lil_cms', 'Reorder menu items'); ?></h1>
<style type="text/css">
	.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; margin-bottom: 20px; }
	.sortable li { 
		cursor: n-resize; 
		margin: 0 3px 3px 3px; 
		padding: 0.4em; 
		padding-left: 1.5em; 
		font-size: 1.4em; 
		height: 18px;
		background: transparent url('<?php echo Router::url('/lil_cms/img/handle.png'); ?>') no-repeat left center;
	}
</style>
<?php
	echo $this->Form->create('CmsMenu');
	echo $this->Html->script('/lil_cms/js/jquery-ui-sortable.min');
?>
<ul class="sortable" id="sortable">
	<?php
		$j = 0;
		foreach ($data as $child) {	
	?>
	<li id="li<?php echo $child['CmsMenu']['id']; ?>"><?php 
		echo h($child['CmsMenu']['caption']);
		echo $this->Form->input($j.'.CmsMenu.sortorder', array(
			'type'=>'hidden',
			'value'=>$j,
			'id'=>'so_li'.$child['CmsMenu']['id']
		));
		echo $this->Form->input($j.'.CmsMenu.id', array('type'=>'hidden', 'value'=>$child['CmsMenu']['id']));
	?></li>
	<?php
			$j++;
		}
		
	?>
</ul>
<?php
	echo $this->Form->submit(__d('lil_cms', 'Save'));
	echo $this->Form->end();
?>
<script type="text/javascript">
$(function() {
	$(".sortable").sortable({ update: function(event, ui) {
		var els = $(this).sortable('toArray');
		var i = 0;
		$.each(els, function(){
			$("#so_"+this).val(i);
			i++;
		});
	}});
	
});
</script>